<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar class="nav" title="正在注册中...">
      <template #right>
        <van-icon name="medal-o" size="30" />
      </template>
    </van-nav-bar>

    <van-form class="form1" @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="userName"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '用户名不能为空' }]"
        />
        <van-field
          type="password"
          v-model="userPwd"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '密码不能为空' }]"
        />
      </van-cell-group>
      <div>
        <van-button
          style="margin: 20px 0; width: 300px; font-size: 20px"
          round
          block
          type="danger"
          native-type="submit"
          >注册</van-button
        >
        <van-button
          style="width: 300px; font-size: 20px"
          round
          block
          type="primary"
          native-type="reset"
          >重置</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import $http from "@/http";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast } from "vant";
const router = useRouter();
const userName = ref("");
const userPwd = ref("");
const onSubmit = () => {
  if (!userName) return;
  if (!userPwd) return;

  $http.userApi
    .add({ userName: userName.value, userPwd: userPwd.value })
    .then((res) => {
      //console.log(res)
      if (res.data.code == 200) {
        showSuccessToast("注册成功");
        router.push("/home/login");
      }
    })
    .catch((err) => console.log(err));
};
</script>

<style lang="scss" scoped>
.form1 {
  background-color: aquamarine;
  height: 545px;
  justify-content: space-evenly;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>

<style lang="scss">
:root {
  --van-nav-bar-background: #07c160;
  --van-nav-bar-title-text-color: white;
  --van-nav-bar-height: 70px;
  --van-nav-bar-icon-color: red;
  --van-nav-bar-title-font-size: 24px;
  --van-nav-bar-z-index: 100;
}
.van-field__label {
  color: #07c160;
}
</style>